<template>
    <div class="ph-breadcrumb">
        <template v-for="(nav,idx) in navs">
            <a class="ph-link" v-if="nav.action" :key="'link'+idx">{{nav.title}}</a>
            <span class="ph-text" v-else :key="'text'+idx">{{nav.title}}</span>
            /
        </template>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
interface Nav{
    title:string,
    action?:string,
    icon?:string
}
export default defineComponent({
    props:{
        navs:{
            type: Array as PropType<Array<Nav>>,
            default:()=>[]
        }
    }
})
</script>

<style lang="scss" scoped>
.ph-breadcrumb{
    position: relative;
    padding: var(--ph-8) var(--ph-15);
    width:100%;
    flex:0 0 auto;
    display: flex;
    align-items: center;
    background-color: var(--ph-light);
    border-left:5px solid var(--ph-theme);
    &:before{
        content:"X";
        display:inline-block;
        width:0;
        overflow: hidden;
    }
    .ph-link,.ph-text{
        padding: 0 var(--ph-10);
    }
    .ph-link{
        color:var(--ph-theme);
        cursor: pointer;
        text-decoration: none;
        &:hover{
            opacity: .8;
        }
    }
}
</style>
